<template>
  <div class="ma-content-block lg:flex justify-between p-4">
    <div class="lg:w-2/12 w-full h-full p-2 shadow">
      <ma-tree-slider
        :data="sliderData"
        :search-placeholder="$t('maResource.searchResource')"
        :field-names="{ title: 'label', key: 'value' }"
        @click="handlerClick"
        icon="icon-folder"
        v-model="defaultKey"
      />
    </div>

    <div class="lg:w-10/12 w-full lg:ml-4 mt-5 lg:mt-0">
      <!-- CRUD 组件 -->
      <ma-crud :options="crud" :columns="columns" ref="crudRef">
        <!-- 表格按钮后置扩展 -->
        <template #tableAfterButtons>
          <a-input-group v-if="mode === 'window'">
            <a-button @click="selectAll"
              ><template #icon><icon-select-all /></template>全选</a-button
            >
            <a-button @click="flushAll"
              ><template #icon><icon-eraser /></template>清除</a-button
            >
          </a-input-group>
        </template>
        <!-- 工具按钮扩展 -->
        <template #tools>
          <a-tooltip :content="mode === 'list' ? '切换橱窗模式' : '切换列表模式'">
            <a-button shape="circle" @click="switchMode">
              <icon-apps v-if="mode === 'list'" />
              <icon-list v-else />
            </a-button>
          </a-tooltip>
        </template>
        <!-- 自定义内容 -->
        <template #crudContent="tableData">
          <a-checkbox-group v-if="mode === 'window'" v-model="selecteds" @change="handlerChange">
            <a-image-preview-group infinite>
              <a-space class="window-list">
                <template v-for="record in tableData" :key="record.id">
                  <div class="mb-2 image-content">
                    <a-checkbox :value="record.id" class="checkbox">
                      <template #checkbox="{ checked }">
                        <a-tag :checked="checked" color="blue" checkable><icon-check /> 选择</a-tag>
                      </template>
                    </a-checkbox>
                    <a-image
                      width="190"
                      height="190"
                      show-loader
                      :title="record.object_name"
                      :description="`大小：${record.size_info}`"
                      :src="
                        /image/g.test(record.mime_type)
                          ? tool.attachUrl(record.url, getStoreMode(record.storage_mode))
                          : $url + 'not-image.png'
                      "
                    >
                      <template #extra>
                        <div class="actions">
                          <a-tooltip content="下载此文件">
                            <span class="action" @click="download(record)"><icon-download /></span>
                          </a-tooltip>
                          <a-tooltip>
                            <span class="action"><icon-info-circle /></span>
                            <template #content>
                              <div>存储名称：{{ record.object_name }}</div>
                              <div>存储目录：{{ record.storage_path }}</div>
                              <div>上传时间：{{ record.create_time }}</div>
                              <div>存储模式：{{ getStoreMode(record.storage_mode) }}</div>
                            </template>
                          </a-tooltip>
                        </div>
                      </template>
                    </a-image>
                  </div>
                </template>
              </a-space>
            </a-image-preview-group>
          </a-checkbox-group>
        </template>

        <!-- 预览内容自定义 -->
        <template #url="{ record }">
          <a-image
            class="list-image"
            v-if="/image/g.test(record.mime_type)"
            width="40px"
            height="40px"
            :src="tool.attachUrl(record.url, getStoreMode(record.storage_mode))"
          />
          <a-avatar v-else shape="square" style="top: 0px">{{ record.suffix }}</a-avatar>
        </template>

        <!-- 操作列前置扩展 -->
        <template #operationBeforeExtend="{ record }">
          <a-link @click="download(record)"><icon-download /> 下载</a-link>
        </template>
      </ma-crud>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, reactive, computed, nextTick } from "vue"
import uploadConfig from "@/config/upload"
import MaTreeSlider from "@cps/ma-treeSlider/index.vue"
import attachment from "@/api/system/attachment"
import commonApi from "@/api/common"
import { useI18n } from "vue-i18n"
import { Message, Modal } from "@arco-design/web-vue"
import tool from "@/utils/tool"

const { t } = useI18n()
const crudRef = ref()
const mode = ref("list")
const defaultKey = ref(["all"])
const sliderData = ref([])
const selecteds = ref([])

onMounted(async () => {
  const treeData = await commonApi.getDict("attachment_type")
  treeData.data.unshift({ label: "所有", value: "all" })
  sliderData.value = treeData.data
})

const handlerClick = async (value) => {
  defaultKey.value = value
  const type = value[0] === "all" ? undefined : value[0]
  crudRef.value.requestParams.mime_type = type
  crudRef.value.refresh()
}

const switchMode = () => {
  mode.value = mode.value === "list" ? "window" : "list"
}

const download = async (record) => {
  let url = ""
  const storeMode = getStoreMode(record.storage_mode)

  if (storeMode !== "LOCAL") {
    Message.info("处理中...")
    const domain = upload.storage[storeMode]
    url = domain + record.url
  } else {
    //文件上传在本地则请求后端下载
    Message.info("请求服务器下载文件中...")
    url = "system/downloadById?id=" + record.id
  }

  const response = await commonApi.download(url, "get")
  if (response) {
    tool.download(response, storeMode !== "LOCAL" ? record.origin_name : "")
    Message.success("请求成功，文件开始下载")
  } else {
    Message.error("文件下载失败")
  }
}

const handlerChange = (val) => {
  selecteds.value = val
  crudRef.value.setSelecteds(val)
}

const selectAll = () => {
  crudRef.value.getTableData().map((item) => selecteds.value.push(item.id))
  crudRef.value.setSelecteds(selecteds.value)
}

const flushAll = () => {
  selecteds.value = []
  crudRef.value.setSelecteds([])
}

const getStoreMode = (mode) => {
  return uploadConfig.storageMode[mode.toString()]
}

const crud = reactive({
  api: attachment.getPageList,
  recycleApi: attachment.getRecyclePageList,
  searchColNumber: 3,
  requestParams: {},
  showIndex: false,
  pageLayout: "fixed",
  rowSelection: { showCheckedAll: true },
  operationColumn: true,
  operationColumnWidth: 140,
  delete: {
    show: true,
    api: attachment.deletes,
    auth: ["/core/attachment/destroy"],
    realApi: attachment.realDestroy,
    realAuth: ["/core/attachment/realDestroy"]
  },
  recovery: {
    show: true,
    api: attachment.recoverys,
    auth: ["/core/attachment/recovery"]
  },
  isDbClickEdit: false
})

const columns = reactive([
  // { title: 'ID', dataIndex: 'id', addDisplay: false, editDisplay: false, width: 50 },
  {
    title: "预览",
    dataIndex: "url",
    width: 80
  },
  {
    title: "存储名称",
    dataIndex: "object_name",
    width: 220
  },
  {
    title: "原文件名",
    dataIndex: "origin_name",
    width: 150,
    search: true
  },
  {
    title: "存储模式",
    dataIndex: "storage_mode",
    width: 100,
    search: true,
    formType: "select",
    dict: {
      name: "upload_mode",
      props: { label: "label", value: "value" },
      translation: true
    }
  },
  {
    title: "资源类型",
    dataIndex: "mime_type",
    width: 130
  },
  {
    title: "存储目录",
    dataIndex: "storage_path",
    width: 130
  },
  {
    title: "文件大小",
    dataIndex: "size_info",
    width: 130
  },
  {
    title: "上传时间",
    dataIndex: "create_time",
    width: 180,
    search: true,
    formType: "range"
  }
])
</script>

<script>
export default { name: "system:attachment" }
</script>

<style scoped>
/* :deep(.arco-image) {
  border-radius: var(--border-radius-medium);
}
:deep(.arco-image-with-footer-inner .arco-image-footer) {
  border-bottom-right-radius: var(--border-radius-medium);
  border-bottom-left-radius: var(--border-radius-medium);
} */
:deep(.arco-image-img) {
  object-fit: contain;
  background-color: var(--color-fill-4);
}
:deep(.arco-image-with-footer-inner .arco-image-footer) {
  padding: 9px;
}
:deep(.arco-image-footer-caption-title) {
  font-size: 14px;
}
:deep(.arco-image-footer-extra) {
  position: relative;
}
:deep(.arco-avatar-square) {
  top: -6px;
}
.window-list {
  display: flex;
  width: 100%;
  flex-wrap: wrap;
  flex-direction: row;
  align-content: center;
}
.image-content {
  position: relative;
}
.image-content .checkbox {
  position: absolute;
  z-index: 10;
  right: -16px;
  color: #fff;
}
:deep(.arco-tag-checkable) {
  color: #fff;
  background: rgba(0, 0, 0, 0.5);
}
/* :deep(.arco-tag-checkable:hover) {
  color: #555;
} */
.actions {
  display: flex;
  align-items: center;
  position: absolute;
  right: 9px;
  bottom: -24px;
}
.action {
  padding: 5px 4px;
  font-size: 14px;
  margin-left: 6px;
  border-radius: 2px;
  line-height: 1;
  cursor: pointer;
}
.action:first-child {
  margin-left: 0;
}

.action:hover {
  background: rgba(0, 0, 0, 0.5);
}
</style>
